<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>GPS Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var geocoder;
var courseMap;
var marker;

function gup(name) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?#&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null )
		return "";
	else
		return results[1];
}

function loadCourseMap() {
	geocoder = new google.maps.Geocoder();
	var latlng = new google.maps.LatLng(gup("lat"), gup("lng"));
	var myOptions = {
		zoom: 15,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	courseMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	
	courseMap.setCenter(latlng);
	marker = new google.maps.Marker({
		map: courseMap, 
		position: latlng,
		name: "My Location"
	});
}

function updateMarker(lat, lng) {
	var latlng = new google.maps.LatLng(lat, lng);
	marker.setMap(null);
	marker = null;
	marker = new google.maps.Marker({
		map: courseMap, 
		position: latlng,
		name: "My Location"
	});
	courseMap.panTo(latlng);
}
</script>
</head>
<body style="position: relative; margin: 0px; height: 100%; ">
	<p>Map:</p>
	<div id="map_canvas" style="height:350px; width: 100%"></div>
	<script type="text/javascript">
		loadCourseMap();
	</script>
</body>
</html>